<template>
    <div>
        <van-nav-bar title="歌单广场" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabs v-model:active="active">
        <van-tab title="推荐">
            <van-grid :column-num="3" :gutter="10" :border="false">
                <van-grid-item v-for="item,index in recommendSteet" :key="item.id" :to="{ path: '/mymusic/musiclist/' + item.id }">
                    <van-image :src="item.picUrl" :width="95" :height="95" :radius="10"/>
                    <span>{{item.name}}</span>
                </van-grid-item>
            </van-grid>
        </van-tab>
        <van-tab title="精品">
            <van-grid :column-num="3" :gutter="10" :border="false">
                <van-grid-item v-for="item,index in selectedSongsSteet" :key="item.id" :to="{ path: '/mymusic/musiclist/' + item.id }">
                    <van-image :src="item.coverImgUrl" :width="95" :height="95" :radius="10"/>
                    <span>{{item.name}}</span>
                </van-grid-item>
            </van-grid>
        </van-tab>
        <van-tab title="官方">
            <van-grid :column-num="3" :gutter="10" :border="false">
                <van-grid-item v-for="item,index in radarSongsSteet" :key="item.creativeId" :to="{ path: '/mymusic/musiclist/' + item.creativeId }">
                    <van-image :src="item.uiElement.image.imageUrl" :width="95" :height="95" :radius="10"/>
                    <span>{{item.uiElement.mainTitle.title}}</span>
                </van-grid-item>
            </van-grid>
        </van-tab>
    </van-tabs>


</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRoute } from 'vue-router'
import { RequestRecommend, RequestSelected, RequestRadarSongsSteet } from '@/api/homeFind';

let active = ref(0);
const route = useRoute()
active.value = Number(route.params.index)

// 推荐歌
let recommendSteet = ref([])
const toGetrecommendSteet = async (limit = 30) => {
    let recommendSteetData = await RequestRecommend(limit)
    const { code, result } = recommendSteetData.data
    if(code == 200){
        recommendSteet.value = result
        // console.log(recommendSteet)
    }
}
toGetrecommendSteet(30)

// 网友精选歌单
let selectedSongsSteet = ref([])
const getSelected = async (order = 'hot', limit = 30) => {
    let selectedData = await RequestSelected( order, limit )
    // console.log(selectedData)
    const { code, playlists } = selectedData.data
    if (code == 200) {
        selectedSongsSteet.value = playlists
        // console.log(selectedSongsSteet)
    }
}
getSelected('hot', 30)

// 官方歌单歌单
let radarSongsSteet = ref([])
const getRadar = async () => {
    let radarData = await RequestRadarSongsSteet()
    const { code, data } = radarData.data
    // console.log('data.data',data)
    if (code == 200) {
        radarSongsSteet.value = data.blocks[8].creatives
        // console.log(radarSongsSteet)
    }
}
getRadar()

const onClickLeft = () => history.back();
</script>
<style scoped lang="scss">
.small-title {
        padding: 10px;
        font-size: 14px;
    }
    .van-grid{
        font-size: 10px;
        span{
            margin-top: 5px;
        }
    }
</style>